<template>
  <div class="exam-page">
    <!-- 考试头部 -->
    <div class="exam-header" :class="{ 'exam-started': examStarted }">
      <div class="container">
        <div v-if="!examStarted" class="exam-info">
          <div class="exam-basic">
            <h1 class="exam-title">{{ exam?.title }}</h1>
            <p class="exam-description">{{ exam?.description }}</p>
            
            <div class="exam-meta">
              <div class="meta-item">
                <el-icon><Clock /></el-icon>
                <span>考试时长：{{ exam?.duration }} 分钟</span>
              </div>
              <div class="meta-item">
                <el-icon><Document /></el-icon>
                <span>题目数量：{{ exam?.questions?.length || 0 }} 题</span>
              </div>
              <div class="meta-item">
                <el-icon><Trophy /></el-icon>
                <span>及格分数：{{ exam?.passingScore }} 分</span>
              </div>
              <div class="meta-item">
                <el-icon><User /></el-icon>
                <span>考试次数：{{ exam?.attemptCount || 0 }}/{{ exam?.maxAttempts || '无限' }}</span>
              </div>
            </div>
          </div>
          
          <div class="exam-actions">
            <el-button
              type="primary"
              size="large"
              :disabled="!canStartExam"
              @click="startExam"
            >
              开始考试
            </el-button>
            
            <el-button size="large" @click="goBack">
              返回
            </el-button>
          </div>
        </div>
        
        <div v-else class="exam-progress">
          <div class="progress-info">
            <h2 class="exam-title">{{ exam?.title }}</h2>
            <div class="progress-stats">
              <span class="current-question">第 {{ currentQuestionIndex + 1 }} 题</span>
              <span class="total-questions">共 {{ exam?.questions?.length || 0 }} 题</span>
            </div>
          </div>
          
          <div class="exam-timer">
            <div class="timer-display" :class="{ warning: timeWarning, danger: timeDanger }">
              <el-icon><Clock /></el-icon>
              <span class="time-text">{{ formatTime(remainingTime) }}</span>
            </div>
            
            <div class="timer-progress">
              <el-progress
                :percentage="timeProgress"
                :stroke-width="4"
                :show-text="false"
                :color="timeProgressColor"
              />
            </div>
          </div>
          
          <div class="exam-actions">
            <el-button @click="showExitConfirm">
              退出考试
            </el-button>
            
            <el-button type="primary" @click="submitExam">
              提交试卷
            </el-button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 考试内容 -->
    <div v-if="examStarted" class="exam-content">
      <div class="container">
        <div class="exam-layout">
          <!-- 左侧题目导航 -->
          <div class="question-nav">
            <div class="nav-header">
              <h3>答题卡</h3>
              <div class="nav-stats">
                <div class="stat-item">
                  <div class="stat-dot answered"></div>
                  <span>已答 {{ answeredCount }}</span>
                </div>
                <div class="stat-item">
                  <div class="stat-dot marked"></div>
                  <span>标记 {{ markedCount }}</span>
                </div>
                <div class="stat-item">
                  <div class="stat-dot unanswered"></div>
                  <span>未答 {{ unansweredCount }}</span>
                </div>
              </div>
            </div>
            
            <div class="nav-grid">
              <div
                v-for="(question, index) in exam?.questions"
                :key="question.id"
                class="nav-item"
                :class="{
                  active: currentQuestionIndex === index,
                  answered: isQuestionAnswered(index),
                  marked: isQuestionMarked(index)
                }"
                @click="goToQuestion(index)"
              >
                {{ index + 1 }}
              </div>
            </div>
          </div>
          
          <!-- 右侧题目内容 -->
          <div class="question-content">
            <div v-if="currentQuestion" class="question-container">
              <div class="question-header">
                <div class="question-info">
                  <span class="question-number">第 {{ currentQuestionIndex + 1 }} 题</span>
                  <span class="question-type">
                    {{ getQuestionTypeText(currentQuestion.type) }}
                  </span>
                  <span class="question-score">
                    {{ currentQuestion.score }} 分
                  </span>
                </div>
                
                <div class="question-actions">
                  <el-button
                    text
                    :type="isQuestionMarked(currentQuestionIndex) ? 'warning' : 'default'"
                    @click="toggleQuestionMark(currentQuestionIndex)"
                  >
                    <el-icon><Flag /></el-icon>
                    {{ isQuestionMarked(currentQuestionIndex) ? '取消标记' : '标记题目' }}
                  </el-button>
                </div>
              </div>
              
              <div class="question-body">
                <div class="question-text" v-html="currentQuestion.text"></div>
                
                <!-- 单选题 -->
                <div v-if="currentQuestion.type === 'single'" class="question-options">
                  <el-radio-group
                    v-model="answers[currentQuestion.id]"
                    @change="onAnswerChange"
                  >
                    <el-radio
                      v-for="option in currentQuestion.options"
                      :key="option.id"
                      :label="option.id"
                      class="option-item"
                    >
                      <div class="option-content">
                        <span class="option-label">{{ option.label }}</span>
                        <span class="option-text">{{ option.text }}</span>
                      </div>
                    </el-radio>
                  </el-radio-group>
                </div>
                
                <!-- 多选题 -->
                <div v-else-if="currentQuestion.type === 'multiple'" class="question-options">
                  <el-checkbox-group
                    v-model="answers[currentQuestion.id]"
                    @change="onAnswerChange"
                  >
                    <el-checkbox
                      v-for="option in currentQuestion.options"
                      :key="option.id"
                      :label="option.id"
                      class="option-item"
                    >
                      <div class="option-content">
                        <span class="option-label">{{ option.label }}</span>
                        <span class="option-text">{{ option.text }}</span>
                      </div>
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
                
                <!-- 判断题 -->
                <div v-else-if="currentQuestion.type === 'judge'" class="question-options">
                  <el-radio-group
                    v-model="answers[currentQuestion.id]"
                    @change="onAnswerChange"
                  >
                    <el-radio label="true" class="option-item">
                      <div class="option-content">
                        <span class="option-label">A</span>
                        <span class="option-text">正确</span>
                      </div>
                    </el-radio>
                    <el-radio label="false" class="option-item">
                      <div class="option-content">
                        <span class="option-label">B</span>
                        <span class="option-text">错误</span>
                      </div>
                    </el-radio>
                  </el-radio-group>
                </div>
                
                <!-- 填空题 -->
                <div v-else-if="currentQuestion.type === 'fill'" class="question-options">
                  <div class="fill-inputs">
                    <div
                      v-for="(blank, index) in currentQuestion.blanks"
                      :key="index"
                      class="fill-item"
                    >
                      <label class="fill-label">第 {{ index + 1 }} 空：</label>
                      <el-input
                        v-model="answers[currentQuestion.id][index]"
                        placeholder="请输入答案"
                        @input="onAnswerChange"
                      />
                    </div>
                  </div>
                </div>
                
                <!-- 简答题 -->
                <div v-else-if="currentQuestion.type === 'essay'" class="question-options">
                  <el-input
                    v-model="answers[currentQuestion.id]"
                    type="textarea"
                    placeholder="请输入答案"
                    :rows="8"
                    :maxlength="currentQuestion.maxLength"
                    show-word-limit
                    @input="onAnswerChange"
                  />
                </div>
              </div>
              
              <div class="question-navigation">
                <el-button
                  :disabled="currentQuestionIndex === 0"
                  @click="previousQuestion"
                >
                  <el-icon><ArrowLeft /></el-icon>
                  上一题
                </el-button>
                
                <el-button
                  v-if="currentQuestionIndex < (exam?.questions?.length || 0) - 1"
                  type="primary"
                  @click="nextQuestion"
                >
                  下一题
                  <el-icon><ArrowRight /></el-icon>
                </el-button>
                
                <el-button
                  v-else
                  type="success"
                  @click="submitExam"
                >
                  提交试卷
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 考试规则对话框 -->
    <el-dialog
      v-model="showRulesDialog"
      title="考试须知"
      width="600px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="exam-rules">
        <h3>考试规则</h3>
        <ul>
          <li>考试时间为 {{ exam?.duration }} 分钟，时间到自动提交</li>
          <li>考试过程中不允许切换浏览器标签页或窗口</li>
          <li>每题只能作答一次，提交后不可修改</li>
          <li>考试期间如遇技术问题，请及时联系监考老师</li>
          <li>严禁作弊，一经发现将取消考试资格</li>
        </ul>
        
        <h3>操作说明</h3>
        <ul>
          <li>点击左侧答题卡可快速跳转到指定题目</li>
          <li>可以标记题目以便后续检查</li>
          <li>建议先完成所有题目，再回头检查</li>
          <li>提交前请确认所有题目都已作答</li>
        </ul>
        
        <div class="rules-agreement">
          <el-checkbox v-model="agreeRules">
            我已阅读并同意遵守以上考试规则
          </el-checkbox>
        </div>
      </div>
      
      <template #footer>
        <el-button @click="showRulesDialog = false">取消</el-button>
        <el-button
          type="primary"
          :disabled="!agreeRules"
          @click="confirmStartExam"
        >
          开始考试
        </el-button>
      </template>
    </el-dialog>
    
    <!-- 退出确认对话框 -->
    <el-dialog
      v-model="showExitDialog"
      title="退出考试"
      width="400px"
    >
      <p>确定要退出考试吗？退出后答题进度将不会保存。</p>
      
      <template #footer>
        <el-button @click="showExitDialog = false">取消</el-button>
        <el-button type="danger" @click="confirmExitExam">
          确定退出
        </el-button>
      </template>
    </el-dialog>
    
    <!-- 提交确认对话框 -->
    <el-dialog
      v-model="showSubmitDialog"
      title="提交试卷"
      width="500px"
    >
      <div class="submit-summary">
        <h3>答题情况</h3>
        <div class="summary-stats">
          <div class="stat-item">
            <span class="stat-label">总题数：</span>
            <span class="stat-value">{{ exam?.questions?.length || 0 }}</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">已答题：</span>
            <span class="stat-value answered">{{ answeredCount }}</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">未答题：</span>
            <span class="stat-value unanswered">{{ unansweredCount }}</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">标记题：</span>
            <span class="stat-value marked">{{ markedCount }}</span>
          </div>
        </div>
        
        <div v-if="unansweredCount > 0" class="warning-message">
          <el-icon><Warning /></el-icon>
          <span>还有 {{ unansweredCount }} 题未作答，确定要提交吗？</span>
        </div>
      </div>
      
      <template #footer>
        <el-button @click="showSubmitDialog = false">继续答题</el-button>
        <el-button type="primary" @click="confirmSubmitExam">
          确定提交
        </el-button>
      </template>
    </el-dialog>
    
    <!-- 加载状态 -->
    <Loading v-if="loading" />
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Clock, Document, Trophy, User, Flag, ArrowLeft, ArrowRight, Warning
} from '@element-plus/icons-vue'
import { useExamStore } from '@/stores/exam'
import { useUserStore } from '@/stores/user'
import Loading from '@/components/common/Loading.vue'

const route = useRoute()
const router = useRouter()
const examStore = useExamStore()
const userStore = useUserStore()

// 响应式数据
const loading = ref(false)
const exam = ref(null)
const examStarted = ref(false)
const currentQuestionIndex = ref(0)
const answers = reactive({})
const markedQuestions = ref(new Set())
const remainingTime = ref(0)
const examTimer = ref(null)
const showRulesDialog = ref(false)
const showExitDialog = ref(false)
const showSubmitDialog = ref(false)
const agreeRules = ref(false)

// 计算属性
const currentQuestion = computed(() => {
  if (!exam.value?.questions || currentQuestionIndex.value < 0) return null
  return exam.value.questions[currentQuestionIndex.value]
})

const canStartExam = computed(() => {
  if (!exam.value) return false
  
  // 检查考试次数限制
  if (exam.value.maxAttempts && exam.value.attemptCount >= exam.value.maxAttempts) {
    return false
  }
  
  // 检查考试时间
  const now = new Date()
  const startTime = new Date(exam.value.startTime)
  const endTime = new Date(exam.value.endTime)
  
  return now >= startTime && now <= endTime
})

const answeredCount = computed(() => {
  if (!exam.value?.questions) return 0
  return exam.value.questions.filter((_, index) => isQuestionAnswered(index)).length
})

const unansweredCount = computed(() => {
  return (exam.value?.questions?.length || 0) - answeredCount.value
})

const markedCount = computed(() => {
  return markedQuestions.value.size
})

const timeProgress = computed(() => {
  if (!exam.value?.duration) return 0
  const totalTime = exam.value.duration * 60 // 转换为秒
  const usedTime = totalTime - remainingTime.value
  return Math.min((usedTime / totalTime) * 100, 100)
})

const timeWarning = computed(() => {
  if (!exam.value?.duration) return false
  const totalTime = exam.value.duration * 60
  return remainingTime.value <= totalTime * 0.2 // 剩余时间少于20%
})

const timeDanger = computed(() => {
  if (!exam.value?.duration) return false
  const totalTime = exam.value.duration * 60
  return remainingTime.value <= totalTime * 0.1 // 剩余时间少于10%
})

const timeProgressColor = computed(() => {
  if (timeDanger.value) return '#f56c6c'
  if (timeWarning.value) return '#e6a23c'
  return '#67c23a'
})

// 方法
const loadExam = async () => {
  try {
    loading.value = true
    const examId = route.params.id
    
    exam.value = await examStore.getExamDetail(examId)
    
    // 初始化答案对象
    if (exam.value?.questions) {
      exam.value.questions.forEach(question => {
        if (question.type === 'multiple' || question.type === 'fill') {
          answers[question.id] = question.type === 'fill' 
            ? new Array(question.blanks?.length || 1).fill('')
            : []
        } else {
          answers[question.id] = ''
        }
      })
    }
    
  } catch (error) {
    ElMessage.error('加载考试失败')
    console.error('Load exam error:', error)
  } finally {
    loading.value = false
  }
}

const startExam = () => {
  showRulesDialog.value = true
}

const confirmStartExam = async () => {
  try {
    showRulesDialog.value = false
    loading.value = true
    
    // 开始考试
    await examStore.startExam(exam.value.id)
    
    examStarted.value = true
    remainingTime.value = exam.value.duration * 60 // 转换为秒
    
    // 启动计时器
    startTimer()
    
    // 监听页面离开事件
    window.addEventListener('beforeunload', handleBeforeUnload)
    window.addEventListener('visibilitychange', handleVisibilityChange)
    
  } catch (error) {
    ElMessage.error('开始考试失败')
  } finally {
    loading.value = false
  }
}

const startTimer = () => {
  examTimer.value = setInterval(() => {
    remainingTime.value--
    
    // 时间警告
    if (remainingTime.value === 300) { // 5分钟警告
      ElMessage.warning('考试时间还剩5分钟，请注意时间！')
    } else if (remainingTime.value === 60) { // 1分钟警告
      ElMessage.error('考试时间还剩1分钟，请尽快完成！')
    }
    
    // 时间到自动提交
    if (remainingTime.value <= 0) {
      clearInterval(examTimer.value)
      ElMessage.error('考试时间到，自动提交试卷！')
      confirmSubmitExam()
    }
  }, 1000)
}

const formatTime = (seconds) => {
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  const secs = seconds % 60
  
  if (hours > 0) {
    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
  }
  return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
}

const isQuestionAnswered = (index) => {
  const question = exam.value?.questions?.[index]
  if (!question) return false
  
  const answer = answers[question.id]
  
  if (question.type === 'multiple') {
    return Array.isArray(answer) && answer.length > 0
  } else if (question.type === 'fill') {
    return Array.isArray(answer) && answer.some(a => a.trim() !== '')
  } else {
    return answer !== '' && answer !== null && answer !== undefined
  }
}

const isQuestionMarked = (index) => {
  return markedQuestions.value.has(index)
}

const toggleQuestionMark = (index) => {
  if (markedQuestions.value.has(index)) {
    markedQuestions.value.delete(index)
  } else {
    markedQuestions.value.add(index)
  }
}

const goToQuestion = (index) => {
  if (index >= 0 && index < (exam.value?.questions?.length || 0)) {
    currentQuestionIndex.value = index
  }
}

const previousQuestion = () => {
  if (currentQuestionIndex.value > 0) {
    currentQuestionIndex.value--
  }
}

const nextQuestion = () => {
  if (currentQuestionIndex.value < (exam.value?.questions?.length || 0) - 1) {
    currentQuestionIndex.value++
  }
}

const onAnswerChange = () => {
  // 答案变化时的处理
  // 可以在这里保存答题进度到本地存储
  saveAnswersToLocal()
}

const saveAnswersToLocal = () => {
  try {
    const examData = {
      examId: exam.value.id,
      answers: answers,
      markedQuestions: Array.from(markedQuestions.value),
      currentQuestionIndex: currentQuestionIndex.value,
      remainingTime: remainingTime.value,
      timestamp: Date.now()
    }
    localStorage.setItem(`exam_${exam.value.id}`, JSON.stringify(examData))
  } catch (error) {
    console.error('Save answers to local error:', error)
  }
}

const loadAnswersFromLocal = () => {
  try {
    const savedData = localStorage.getItem(`exam_${exam.value.id}`)
    if (savedData) {
      const examData = JSON.parse(savedData)
      
      // 检查数据是否过期（超过考试时间）
      const now = Date.now()
      const maxAge = exam.value.duration * 60 * 1000 // 考试时长的毫秒数
      
      if (now - examData.timestamp < maxAge) {
        Object.assign(answers, examData.answers)
        markedQuestions.value = new Set(examData.markedQuestions)
        currentQuestionIndex.value = examData.currentQuestionIndex
        remainingTime.value = examData.remainingTime
        
        ElMessage.info('已恢复上次答题进度')
        return true
      }
    }
  } catch (error) {
    console.error('Load answers from local error:', error)
  }
  return false
}

const clearLocalAnswers = () => {
  try {
    localStorage.removeItem(`exam_${exam.value.id}`)
  } catch (error) {
    console.error('Clear local answers error:', error)
  }
}

const getQuestionTypeText = (type) => {
  const typeMap = {
    single: '单选题',
    multiple: '多选题',
    judge: '判断题',
    fill: '填空题',
    essay: '简答题'
  }
  return typeMap[type] || '未知题型'
}

const showExitConfirm = () => {
  showExitDialog.value = true
}

const confirmExitExam = () => {
  showExitDialog.value = false
  
  // 清理计时器和事件监听
  if (examTimer.value) {
    clearInterval(examTimer.value)
  }
  window.removeEventListener('beforeunload', handleBeforeUnload)
  window.removeEventListener('visibilitychange', handleVisibilityChange)
  
  // 清理本地存储
  clearLocalAnswers()
  
  // 返回考试列表
  router.push('/exams')
}

const submitExam = () => {
  showSubmitDialog.value = true
}

const confirmSubmitExam = async () => {
  try {
    showSubmitDialog.value = false
    loading.value = true
    
    // 准备提交数据
    const submitData = {
      examId: exam.value.id,
      answers: answers,
      timeUsed: (exam.value.duration * 60) - remainingTime.value,
      submitTime: new Date().toISOString()
    }
    
    // 提交考试
    const result = await examStore.submitExam(submitData)
    
    // 清理计时器和事件监听
    if (examTimer.value) {
      clearInterval(examTimer.value)
    }
    window.removeEventListener('beforeunload', handleBeforeUnload)
    window.removeEventListener('visibilitychange', handleVisibilityChange)
    
    // 清理本地存储
    clearLocalAnswers()
    
    ElMessage.success('考试提交成功！')
    
    // 跳转到成绩页面
    router.push(`/exam-result/${result.resultId}`)
    
  } catch (error) {
    ElMessage.error('提交考试失败')
    console.error('Submit exam error:', error)
  } finally {
    loading.value = false
  }
}

const goBack = () => {
  router.back()
}

// 页面离开警告
const handleBeforeUnload = (event) => {
  if (examStarted.value) {
    event.preventDefault()
    event.returnValue = '考试正在进行中，确定要离开吗？'
    return '考试正在进行中，确定要离开吗？'
  }
}

// 页面可见性变化处理
const handleVisibilityChange = () => {
  if (examStarted.value && document.hidden) {
    ElMessage.warning('检测到您切换了页面，请专心考试！')
    // 可以在这里记录切换次数，超过限制可以强制提交
  }
}

// 生命周期
onMounted(() => {
  loadExam()
})

onUnmounted(() => {
  // 清理计时器和事件监听
  if (examTimer.value) {
    clearInterval(examTimer.value)
  }
  window.removeEventListener('beforeunload', handleBeforeUnload)
  window.removeEventListener('visibilitychange', handleVisibilityChange)
})

// 监听路由变化
watch(
  () => route.params.id,
  (newId) => {
    if (newId) {
      loadExam()
    }
  }
)
</script>

<style lang="scss" scoped>
.exam-page {
  min-height: 100vh;
  background: var(--el-bg-color-page);
}

// 考试头部
.exam-header {
  background: var(--el-bg-color);
  border-bottom: 1px solid var(--el-border-color-lighter);
  padding: 24px 0;
  
  &.exam-started {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 16px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .exam-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    
    .exam-basic {
      flex: 1;
      
      .exam-title {
        font-size: 1.8rem;
        font-weight: 600;
        color: var(--el-text-color-primary);
        margin-bottom: 12px;
        line-height: 1.3;
      }
      
      .exam-description {
        color: var(--el-text-color-secondary);
        margin-bottom: 20px;
        line-height: 1.5;
      }
      
      .exam-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
        
        .meta-item {
          display: flex;
          align-items: center;
          gap: 8px;
          color: var(--el-text-color-regular);
          font-size: 14px;
          
          .el-icon {
            color: var(--el-color-primary);
          }
        }
      }
    }
    
    .exam-actions {
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }
  }
  
  .exam-progress {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    
    .progress-info {
      flex: 1;
      
      .exam-title {
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--el-text-color-primary);
        margin-bottom: 8px;
      }
      
      .progress-stats {
        display: flex;
        gap: 16px;
        font-size: 14px;
        color: var(--el-text-color-secondary);
      }
    }
    
    .exam-timer {
      display: flex;
      align-items: center;
      gap: 16px;
      
      .timer-display {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--el-color-success);
        
        &.warning {
          color: var(--el-color-warning);
        }
        
        &.danger {
          color: var(--el-color-danger);
          animation: blink 1s infinite;
        }
        
        .el-icon {
          font-size: 20px;
        }
      }
      
      .timer-progress {
        width: 120px;
      }
    }
    
    .exam-actions {
      display: flex;
      gap: 12px;
    }
  }
}

// 考试内容
.exam-content {
  padding: 24px 0;
  
  .exam-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    align-items: flex-start;
  }
}

// 题目导航
.question-nav {
  background: var(--el-bg-color);
  border-radius: 8px;
  border: 1px solid var(--el-border-color-lighter);
  overflow: hidden;
  position: sticky;
  top: 120px;
  
  .nav-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--el-border-color-lighter);
    
    h3 {
      margin: 0 0 12px 0;
      font-size: 16px;
      font-weight: 600;
      color: var(--el-text-color-primary);
    }
    
    .nav-stats {
      display: flex;
      flex-direction: column;
      gap: 8px;
      
      .stat-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        color: var(--el-text-color-secondary);
        
        .stat-dot {
          width: 12px;
          height: 12px;
          border-radius: 2px;
          
          &.answered {
            background: var(--el-color-success);
          }
          
          &.marked {
            background: var(--el-color-warning);
          }
          
          &.unanswered {
            background: var(--el-border-color-light);
          }
        }
      }
    }
  }
  
  .nav-grid {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    
    .nav-item {
      width: 36px;
      height: 36px;
      border: 1px solid var(--el-border-color-light);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      color: var(--el-text-color-regular);
      background: var(--el-bg-color);
      transition: all 0.2s;
      
      &:hover {
        border-color: var(--el-color-primary);
        color: var(--el-color-primary);
      }
      
      &.active {
        background: var(--el-color-primary);
        border-color: var(--el-color-primary);
        color: white;
      }
      
      &.answered {
        background: var(--el-color-success-light-8);
        border-color: var(--el-color-success);
        color: var(--el-color-success);
        
        &.active {
          background: var(--el-color-success);
          color: white;
        }
      }
      
      &.marked {
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          top: 2px;
          right: 2px;
          width: 6px;
          height: 6px;
          background: var(--el-color-warning);
          border-radius: 50%;
        }
      }
    }
  }
}

// 题目内容
.question-content {
  background: var(--el-bg-color);
  border-radius: 8px;
  border: 1px solid var(--el-border-color-lighter);
  
  .question-container {
    padding: 24px;
  }
  
  .question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--el-border-color-lighter);
    
    .question-info {
      display: flex;
      gap: 16px;
      align-items: center;
      
      .question-number {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--el-color-primary);
      }
      
      .question-type {
        background: var(--el-color-info-light-8);
        color: var(--el-color-info);
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
      }
      
      .question-score {
        background: var(--el-color-warning-light-8);
        color: var(--el-color-warning);
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 500;
      }
    }
  }
  
  .question-body {
    margin-bottom: 32px;
    
    .question-text {
      font-size: 16px;
      line-height: 1.6;
      color: var(--el-text-color-primary);
      margin-bottom: 24px;
      
      :deep(img) {
        max-width: 100%;
        height: auto;
        border-radius: 4px;
        margin: 12px 0;
      }
      
      :deep(code) {
        background: var(--el-fill-color-light);
        padding: 2px 6px;
        border-radius: 4px;
        font-family: 'Monaco', 'Consolas', monospace;
      }
      
      :deep(pre) {
        background: var(--el-fill-color-light);
        padding: 16px;
        border-radius: 8px;
        overflow-x: auto;
        margin: 16px 0;
      }
    }
    
    .question-options {
      .option-item {
        margin-bottom: 16px;
        padding: 12px;
        border: 1px solid var(--el-border-color-lighter);
        border-radius: 8px;
        transition: all 0.2s;
        
        &:hover {
          border-color: var(--el-color-primary-light-5);
          background: var(--el-color-primary-light-9);
        }
        
        :deep(.el-radio__input.is-checked + .el-radio__label),
        :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
          color: var(--el-color-primary);
        }
        
        .option-content {
          display: flex;
          gap: 12px;
          align-items: flex-start;
          
          .option-label {
            font-weight: 600;
            color: var(--el-color-primary);
            flex-shrink: 0;
            min-width: 20px;
          }
          
          .option-text {
            flex: 1;
            line-height: 1.5;
            color: var(--el-text-color-primary);
          }
        }
      }
      
      .fill-inputs {
        .fill-item {
          display: flex;
          align-items: center;
          gap: 12px;
          margin-bottom: 16px;
          
          .fill-label {
            font-weight: 500;
            color: var(--el-text-color-primary);
            min-width: 80px;
          }
          
          .el-input {
            flex: 1;
            max-width: 300px;
          }
        }
      }
    }
  }
  
  .question-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid var(--el-border-color-lighter);
  }
}

// 对话框样式
.exam-rules {
  h3 {
    color: var(--el-text-color-primary);
    font-size: 16px;
    font-weight: 600;
    margin: 16px 0 12px 0;
    
    &:first-child {
      margin-top: 0;
    }
  }
  
  ul {
    margin: 0 0 16px 0;
    padding-left: 20px;
    
    li {
      color: var(--el-text-color-regular);
      line-height: 1.6;
      margin-bottom: 8px;
    }
  }
  
  .rules-agreement {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--el-border-color-lighter);
  }
}

.submit-summary {
  h3 {
    color: var(--el-text-color-primary);
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px 0;
  }
  
  .summary-stats {
    margin-bottom: 20px;
    
    .stat-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      border-bottom: 1px solid var(--el-border-color-extra-light);
      
      &:last-child {
        border-bottom: none;
      }
      
      .stat-label {
        color: var(--el-text-color-regular);
      }
      
      .stat-value {
        font-weight: 600;
        
        &.answered {
          color: var(--el-color-success);
        }
        
        &.unanswered {
          color: var(--el-color-danger);
        }
        
        &.marked {
          color: var(--el-color-warning);
        }
      }
    }
  }
  
  .warning-message {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: var(--el-color-warning-light-9);
    border: 1px solid var(--el-color-warning-light-5);
    border-radius: 6px;
    color: var(--el-color-warning-dark-2);
    
    .el-icon {
      font-size: 16px;
    }
  }
}

// 动画
@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0.5;
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .exam-content {
    .exam-layout {
      grid-template-columns: 240px 1fr;
    }
  }
  
  .question-nav {
    .nav-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }
}

@media (max-width: 1024px) {
  .exam-header {
    .exam-info {
      flex-direction: column;
      gap: 20px;
      
      .exam-actions {
        align-self: stretch;
        justify-content: center;
      }
    }
    
    .exam-progress {
      flex-direction: column;
      gap: 16px;
      text-align: center;
      
      .exam-timer {
        justify-content: center;
      }
      
      .exam-actions {
        justify-content: center;
      }
    }
  }
  
  .exam-content {
    .exam-layout {
      grid-template-columns: 1fr;
      
      .question-nav {
        order: 2;
        position: static;
      }
      
      .question-content {
        order: 1;
      }
    }
  }
}

@media (max-width: 768px) {
  .exam-header {
    padding: 16px 0;
    
    &.exam-started {
      padding: 12px 0;
    }
    
    .exam-info {
      .exam-basic {
        .exam-title {
          font-size: 1.4rem;
        }
        
        .exam-meta {
          flex-direction: column;
          gap: 12px;
        }
      }
    }
    
    .exam-progress {
      .progress-info {
        .exam-title {
          font-size: 1rem;
        }
        
        .progress-stats {
          flex-direction: column;
          gap: 8px;
        }
      }
      
      .exam-timer {
        flex-direction: column;
        gap: 12px;
        
        .timer-display {
          font-size: 1rem;
        }
        
        .timer-progress {
          width: 200px;
        }
      }
    }
  }
  
  .exam-content {
    padding: 16px 0;
  }
  
  .question-nav {
    .nav-grid {
      grid-template-columns: repeat(6, 1fr);
      
      .nav-item {
        width: 32px;
        height: 32px;
        font-size: 12px;
      }
    }
  }
  
  .question-content {
    .question-container {
      padding: 20px;
    }
    
    .question-header {
      flex-direction: column;
      gap: 12px;
      align-items: flex-start;
      
      .question-info {
        flex-wrap: wrap;
        gap: 8px;
      }
    }
    
    .question-navigation {
      flex-direction: column;
      gap: 12px;
      
      .el-button {
        width: 100%;
      }
    }
  }
}

@media (max-width: 480px) {
  .exam-header {
    .exam-info {
      .exam-basic {
        .exam-title {
          font-size: 1.2rem;
        }
      }
    }
  }
  
  .question-nav {
    .nav-header {
      padding: 12px 16px;
      
      h3 {
        font-size: 14px;
      }
    }
    
    .nav-grid {
      padding: 16px;
      grid-template-columns: repeat(5, 1fr);
      
      .nav-item {
        width: 28px;
        height: 28px;
        font-size: 11px;
      }
    }
  }
  
  .question-content {
    .question-container {
      padding: 16px;
    }
    
    .question-body {
      .question-text {
        font-size: 14px;
      }
      
      .question-options {
        .option-item {
          padding: 8px;
          
          .option-content {
            .option-text {
              font-size: 14px;
            }
          }
        }
        
        .fill-inputs {
          .fill-item {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
            
            .fill-label {
              min-width: auto;
            }
            
            .el-input {
              width: 100%;
              max-width: none;
            }
          }
        }
      }
    }
  }
}
</style>